<template>
	<a-modal :visible="visible" width="850px" title="租客退定" centered destroyOnClose @cancel="cancel" :footer="null" :maskClosable="false" :bodyStyle="{padding: 0}">
		<a-form ref="formRef" :model="modelRef" :rules="formRules" class="flex-container-nomal" style="max-height: 70vh" @finish="run" :labelCol="{style: {width: '90px'}}">
			<div class="flex1 auto-y">
				<a-space :size="15" direction="vertical">
					<a-descriptions size="small" :column="4">
						<template #title>
							<div class="d-module-title">
								<b>预定信息</b>
							</div>
						</template>
						<!-- /{{ sexList[detailInfo.gender] }} -->
						<a-descriptions-item label="预定人信息" :span="2">{{ detailInfo.name }}/{{ detailInfo.phone }}</a-descriptions-item>
						<a-descriptions-item v-if="detailInfo.certificateNo" label="预定人身份信息" :span="2">{{ CERTIFICATION_TYPE_MAP[detailInfo.certificateType] }}/{{ detailInfo.certificateNo }}</a-descriptions-item>
						<a-descriptions-item label="预定房源" :span="4">{{ detailInfo.houseAddress }}</a-descriptions-item>
					</a-descriptions>
					<a-space :size="24" direction="vertical" style="width: 100%">
						<div class="d-module-title">
							<b>退定信息</b>
						</div>
						<a-row>
							<a-col :span="10">
								<a-form-item label="退还金额" name="refundMoney" :rules="formRules.refundMoney">
									<div class="display-flex">
										<a-input-number style="flex: 1" placeholder="请输入退还金额" v-model:value="modelRef.refundMoney" :min="0" :precision="2" :max="detailInfo.money" />
										<span style="align-self: center">元</span>
									</div>
								</a-form-item>
							</a-col>
							<a-col :span="14">
								<a-form-item label="退款途径" name="backPayAccount" :rules="formRules.backPayAccount">
									<a-input-group compact>
										<a-form-item-rest>
											<a-select style="width: 35%" v-model:value="modelRef.backMoneyTypeVal" :options="moneyTypeList" :field-names="{label: 'name', value: 'name'}" />
										</a-form-item-rest>
										<a-input style="width: 65%" v-model:value="modelRef.backPayAccount" placeholder="请输入账号" />
									</a-input-group>
								</a-form-item>
							</a-col>
							<a-col :span="24">
								<a-form-item label="退定备注" name="backRemark">
									<a-textarea v-model:value="modelRef.backRemark" placeholder="请输入退定备注" :rows="4" show-count :maxlength="500" />
								</a-form-item>
							</a-col>
							<a-col :span="24">
								<a-form-item label="退定凭证" name="fileList">
									<file-upload v-model:files="modelRef.fileList" show-qr-code />
								</a-form-item>
							</a-col>
						</a-row>
					</a-space>
				</a-space>
			</div>
			<div class="a-modal-dialog-footer">
				<a-space :size="12">
					<a-space :size="12">
						<!-- <a-button @click="depositForfeiture" v-if="store.hasPermissions(['mk_contract_reserve_djfm'])">定金罚没</a-button> -->
						<a-button type="primary" html-type="submit" :loading="loading" :disabled="loading">确定</a-button>
					</a-space>
				</a-space>
			</div>
		</a-form>
	</a-modal>
	<!-- 定金罚没 -->
	<!-- <deposit-forfeiture-dialog :id="id" v-model:visible="showDepositForfeiture" /> -->
</template>
<script setup lang="ts">
	import {reactive, ref, watch} from 'vue'
	import {useRequest} from 'vue-request'
	import {bookBack, getBookDetail} from '@/api/contract'
	import {message} from 'ant-design-vue'
	import {sexList} from '@/utils'
	import {CERTIFICATION_TYPE_MAP} from 'yuxin-base/src/constant/index'
	// import DepositForfeitureDialog from './deposit-forfeiture'
	import FileUpload from '@/components/common/file-upload.vue'
	import settingApi from 'yuxin-base/src/api/setting-api'
	import {DIC_PID_MAP} from 'yuxin-base/src/constant'
	import {useStore} from '@/store/index'
	const store = useStore()

	const props = defineProps({
		visible: {
			type: Boolean,
			required: true
		},
		id: {
			type: [String, Number],
			default: ''
		}
	})
	const emit = defineEmits(['update:visible', 'success'])
	const cancel = () => {
		emit('update:visible', false)
		resetForm()
	}
	watch(
		() => props.visible,
		(newVal: boolean) => {
			if (newVal) {
				getDetail()
			}
		}
	)

	const modelRef = reactive({
		backRemark: '',
		refundMoney: '',
		backMoneyTypeVal: '',
		backPayAccount: '',
		fileList: []
	})

	const formRules = {
		refundMoney: [
			{
				required: true,
				message: '请输入金额'
			}
		],
		backPayAccount: [
			{
				required: true,
				message: '请输入账号'
			}
		]
	}

	const detailInfo = ref<any>({})
	const moneyTypeList = ref<any[]>([])
	const getDetail = () => {
		settingApi.getDicListByPid(DIC_PID_MAP['PAYMENTMETHOD@PAYMENTMETHOD']).then(({data}) => {
			moneyTypeList.value = data
			if (data.length) {
				modelRef.backMoneyTypeVal = data[0].name
			}
		})
		getBookDetail(props.id).then((res: any) => {
			detailInfo.value = res.data
			modelRef.refundMoney = res.data.money
		})
	}

	const sendRequest = () => {
		let fileIds = modelRef.fileList.map((o: any) => o.id)
		let params: any = {...modelRef, fileIds, id: props.id}
		return bookBack(params)
	}

	const {run, loading} = useRequest(sendRequest, {
		manual: true,
		formatResult: (res: any) => {
			if (res.code == 200) {
				message.success('操作成功')
				setTimeout(() => {
					emit('success')
					cancel()
				}, 300)
			}
		}
	})

	// 重置表单
	const formRef = ref<any>()
	const resetForm = () => {
		detailInfo.value = {}
		modelRef.backMoneyTypeVal = ''
		formRef.value.resetFields()
	}

	// 定金罚没展示
	const showDepositForfeiture = ref(false)
	const depositForfeiture = () => {
		emit('update:visible', false)
		showDepositForfeiture.value = true
	}
</script>
